<template>
  <div class="sys-onlineUser-container">
    <a-drawer v-model:visible="state.isVisible" title="在线用户列表" width="40%">
      <a-card shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin: 8px">
        <a-form :model="state.queryParams" ref="queryForm" :inline="true">
          <a-form-item label="账号名称" name="userName">
            <a-input placeholder="账号名称" clearable @keyup.enter="tableRef?.reload()"
              v-model:value="state.queryParams.userName" />
          </a-form-item>
          <a-form-item label="真实姓名" name="realName">
            <a-input placeholder="账号名称" clearable @keyup.enter="tableRef?.reload()"
              v-model:value="state.queryParams.realName" />
          </a-form-item>
          <a-form-item>
            <a-button-group>
              <a-button type="primary" @click="tableRef?.reload()">
                <template #icon>
                  <SearchOutlined />
                </template>
                查询
              </a-button>
              <a-button @click="resetQuery">
                <template #icon>
                  <ReloadOutlined />
                </template>
                重置
              </a-button>
            </a-button-group>
          </a-form-item>
        </a-form>
      </a-card>

      <a-card shadow="hover" style="margin: 8px; padding-bottom: 15px">
        <ele-pro-table ref="tableRef" row-key="id" :columns="columns" :datasource="datasource">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-button size="small" danger type="link" @click="forceOffline(record)">
                下线
              </a-button>
            </template>
          </template>
        </ele-pro-table>
      </a-card>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
import { createVNode, onMounted, reactive, ref } from 'vue';
import { Modal } from 'ant-design-vue';
import {
  ExclamationCircleOutlined,
  SearchOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue';
import { getOnlineUserPage } from '@/api/system/onlinUser';
import { ForceOffline, onStart } from './signalR';
import {
  ColumnItem,
  DatasourceFunction
} from 'ele-admin-pro/es/ele-pro-table/types';
import { EleProTable } from 'ele-admin-pro';

const state = reactive({
  loading: false,
  isVisible: false,
  queryParams: {
    userName: undefined,
    realName: undefined
  },
  lastUserState: {
    online: false,
    realName: ''
  } // 最后接收的用户变更状态信息
});
// 表格 ref
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
const columns = ref<ColumnItem[]>([
  {
    key: 'index',
    width: 48,
    align: 'center',
    hideInSetting: true,
    customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
  },
  {
    title: '账号',
    dataIndex: 'userName'
  },
  {
    title: '姓名',
    dataIndex: 'realName'
  },
  {
    title: 'IP',
    dataIndex: 'IP地址'
  },
  {
    title: '浏览器',
    dataIndex: 'browser'
  },
  {
    title: '登录时间',
    dataIndex: 'time'
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center'
  }
]);
/* 表格数据源 */
const datasource: DatasourceFunction = async ({ page, limit, orders }) => {
  var result = await getOnlineUserPage({
    ...state.queryParams,
    ...orders,
    page,
    pageSize: limit
  });
  return result;
};
onMounted(() => {
  onStart();
});

// 打开页面
const openDrawer = () => {
  state.isVisible = true;
};

// 重置操作
const resetQuery = () => {
  state.queryParams.userName = undefined;
  state.queryParams.realName = undefined;

  tableRef.value?.reload();
};

// 强制下线
const forceOffline = async (row: any) => {
  Modal.confirm({
    title: '提示',
    content: `确定踢掉账号：【${row.realName}】?`,
    centered: true,
    icon: createVNode(ExclamationCircleOutlined),
    async onOk() {
      ForceOffline(row);
    }
  });
};

// 导出对象
defineExpose({ openDrawer });
</script>
